<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PVZ 社区</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/layout-style.css">
    <link rel="stylesheet" href="../css/container-style.css">
    <link rel="stylesheet" href="../css/card.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/input-box.css">
    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
</head>

<body>

    <div id="app">
        <el-backtop></el-backtop>
        <div class="head">
            <el-row>
                <el-col :span="20">
                    <div class="grid-content bg-purple-dark"></div>
                </el-col>
                <el-col :span="1">
                    <div class="mt-5">
                        <el-avatar src="../imgs/标题海报.png"></el-avatar>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="mb-5">
                        <el-dropdown>
                            <span class="el-dropdown-link uname">
                                用户名<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                                <el-dropdown-item>用户功能</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="bg">
            <div class="center">
                <!-- Layout布局 -->
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple"><img class="img-head" src="../imgs/标题海报.png"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark"></div>
                    </el-col>
                </el-row>
                <!-- 功能图标栏 -->
                <el-row :gutter="5">
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <a href="./plants.html" target="_blank"><img class=" img-ico" src="../imgs/ico/植物图鉴.png"></a>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <a href="./zombies.html" target="_blank"><img class="img-ico" src="../imgs/ico/僵尸图鉴.png"></a>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple"><img class="img-ico" src="../imgs/ico/关卡攻略.png"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light"><img class="img-ico" src="../imgs/ico/游戏介绍.png">
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <a href="./goods.html" target="_blank">
                                <img class="img-ico" src="../imgs/ico/游戏周边.png">
                        </div>
                        </a>
                    </el-col>
                    <el-col :span="4" class="mt-5">
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                        </el-input>
                    </el-col>
                </el-row>
                <el-container>
                    <el-container>
                        <el-header>
                            <!-- 轮播 -->
                            <template>
                                <el-carousel :interval="4000" type="card" height="270px">
                                    <el-carousel-item v-for="item in 3" :key="item">
                                        <h3 class="medium">{{ item }}</h3>
                                    </el-carousel-item>
                                </el-carousel>
                            </template>
                        </el-header>
                        <el-main></el-main>
                        <el-footer></el-footer>
                    </el-container>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>wiki介绍</span>
                        </div>
                        <div class="text item">
                            <p>武装多种植物切换不同的功能， 快速有效地把僵尸阻挡在入侵 的道路上。 不同的敌人，不同 的玩法构成五种不同 的游戏模 式
                        </div>
                    </el-card>
                </el-container>
                <el-footer></el-footer>

                <!-- 游戏攻略模块 -->
                <el-container>
                    <el-container>
                        <el-header class="header-p">
                            <el-button type="primary">游戏攻略</el-button>
                        </el-header>
                        <el-main>
                            <div>
                                <el-row :gutter="8">
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple-dark">
                                            <img class="ico-s" src="../imgs/ico/缠绕水草.png">
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple-light mt-5">
                                            <el-button type="info" round>小游戏攻略</el-button>
                                        </div>
                                    </el-col>
                                    <el-col :span="1"></el-col>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple-dark">
                                            <img class="ico-s" src="../imgs/ico/寒冰菇.png">
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple-light mt-5">
                                            <el-button type="info" round>夜晚攻略</el-button>
                                        </div>
                                    </el-col>
                                    <el-col :span="1"></el-col>
                                    <el-col :span="2">
                                        <div class="grid-content bg-purple-dark">
                                            <img class="ico-s" src="../imgs/ico/地刺.png">
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple-light mt-5">
                                            <el-button type="info" round>白天攻略</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-main>
                    </el-container>

                    <!-- 词条跟新模块（在游戏模块右边） -->
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>词条更新</span>
                        </div>
                        <div class="text item">
                            <el-button type="info" size="mini" plain>更新</el-button>
                            豌豆射手
                            <el-divider></el-divider>
                        </div>
                        <div class="text item">
                            <el-button type="info" size="mini" plain>更新</el-button>
                            寒冰射手
                            <el-divider></el-divider>
                        </div>
                    </el-card>
                </el-container>

                <!-- 分界 -->
                <el-footer></el-footer>

                <!-- 植物图鉴模块 -->
                <el-container>
                    <el-container>
                        <el-header class="header-p">
                            <el-button type="primary">植物</el-button>
                        </el-header>
                        <el-main>
                            <div class="main-p">
                                <img v-for="pid in 8" :src='"http://127.0.0.1:8080/plant/img/" + pid' alt="" srcset="">
                            </div>
                        </el-main>
                        <el-header class="header-p">
                            <el-button type="primary">僵尸</el-button>
                        </el-header>
                        <el-main>
                            <div>
                                <div class="main-p">
                                    <img v-for="pid in 8" :src='"http://127.0.0.1:8080/zombie/img/" + pid' alt="" srcset="">
                                </div>
                            </div>
                        </el-main>
                    </el-container>

                    <!-- 帖子模块 -->
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>论坛热帖</span>
                            <a href="./bbs.html" target="_blank">
                                <el-button style="float: right; padding: 3px 0" type="text">进入论坛</el-button>
                            </a>
                        </div>
                        <div v-for="o in 3" :key="o" class="text item">
                            <el-row>
                                <el-col :span="16">
                                    <div class="grid-content bg-purple">
                                        纯萌新问问，大佬先别急着高血压
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light"><img src="../imgs/论坛/论坛1.jpg" class="img-t">
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3">
                                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small">
                                    </el-avatar>
                                </el-col>
                                <el-col :span="3"></el-col>
                                <el-col :span="15">
                                    <p>停止构造世界</p>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                        </div>
                    </el-card>
                </el-container>

                <!-- 分界 -->
                <el-footer></el-footer>


                <!-- 游戏周边模块 -->
                <el-container>
                    <el-container>
                        <el-header class="header-p">
                            <el-button type="primary">游戏周边</el-button>
                        </el-header>
                        <el-main class="main-pp">
                            <div>
                                <el-row :gutter="5">
                                    <el-col :span="8">
                                        <el-card :body-style="{ padding: '0px' }">
                                            <img src="../imgs/周边/周边1.jfif" class="image">
                                            <div style="padding: 14px;">
                                                <span>倭瓜玩偶</span>
                                                <div class="bottom clearfix">
                                                    <el-button type="text" class="button">操作按钮</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-card :body-style="{ padding: '0px' }">
                                            <img src="../imgs/周边/周边2.jfif" class="image">
                                            <div style="padding: 14px;">
                                                <span>僵尸钱包</span>
                                                <div class="bottom clearfix">
                                                    <el-button type="text" class="button">操作按钮</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-card :body-style="{ padding: '0px' }">
                                            <img src="../imgs/周边/周边3.jfif" class="image">
                                            <div style="padding: 14px;">
                                                <span>收藏展览</span>
                                                <div class="bottom clearfix">
                                                    <el-button type="text" class="button">操作按钮</el-button>
                                                </div>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-main>

                    </el-container>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>友情链接</span>
                        </div>
                        <div v-for="o in 2" :key="o" class="text item">
                            {{'列表内容 ' + o }}
                        </div>
                    </el-card>
                </el-container>
            </div>
        </div>

        <el-button @click="drawer=true" type="primary" style="margin-left: 16px;" class="post">
            发帖
        </el-button>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :direction="direction">
            <span>
                <div class="textbox">
                    <div class="headline">
                        <p>帖子标题</p>
                    </div>
                    <input class="hlp" />
                    <textarea class="put"></textarea>
                    <div class="send">
                        <el-button>发送帖子</el-button>
                    </div>
                </div>
            </span>
        </el-drawer>
    </div>
</body>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            value: true,
            input: '',
            drawer: false,
            direction: 'btt'
        }
    })
</script>